<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { reactive, toRef, toRefs } from "vue";

// 数据
let person = reactive({
  name: "张三",
  age: 18,
});

// 通过toRefs将person对象中的n个属性批量取出，依然保持响应式的能力
console.log(toRefs(person)); // {name: ObjectRefImpl, age: ObjectRefImpl}
// 通过解构赋值，将toRefs生成的响应式属性赋值给变量
let { name, age } = toRefs(person);
console.log(name, age); // ref响应对象

let nl = toRef(person, "age");
console.log(nl, nl.value); // ref响应对象

// 方法
function changeName() {
  // person.name += "~"; // 不使用toRefs
  name.value += "~"; // 直接修改响应属性
  console.log(name.value === person.name); // 在模板中使用name/person.name均可
}
function changeAge() {
  age.value += 1;
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>
